<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

		<title>历下区检察院12345热线数据分析</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
		<style type="text/css">
			.container table tbody tr {
				line-height: 40px;
				background: #142A40;
				width: 99%;
				margin: auto;
				margin-top: 4px;
			}
           @media screen and (min-width: 1900px) {
			.container table thead th {
			   	padding-top: 70px\0\9 !important;
			   }
			   .container table tbody tr {
			   	line-height: 46px\0\9;
			   
			   	margin-top: 7px\0\9;
			   }
	     
		　}
		

			.container table tbody :hover {
				background: #173B5B;
				transition: 2s;
				margin: 5px;
			}

			.jc_table_bottom_table1 {
				background-image: url(img/111.png);
				background-size: 100% 100%;
				height: 80%;
				overflow: hidden;
				position: absolute;
				left: 50%;
				margin: -15% 0 0 -39%;
				top: 45%;
				height: auto\0\9;
				overflow: initial\0\9;
			
			}

			.container table thead {
				margin-top: 55px;
			}

			.container table #table_data1 {
				width: 100%;
				overflow: auto;
				max-height: 58vh;
				max-height: 61vh\0\9;
			}

			.buiding_details_content {
				height: auto;
				border: 1px solid #546794;
				width: 97%;
				display: inline-block;
				margin-left: 20px;
				background: #112131;
				
			}

			.key_c {
				color: #646b77;
				display: inline-block;
				font-size: 12px;
			}

			.value_c {
				color: #fff;
				display: inline-block;
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				-moz-box-orient: vertical;
				-ms-flex-direction: column;
				-o-box-orient: vertical;
				-o-text-overflow: ellipsis;
				height: 50px;
			     width:100%;
				display: flex;
				    align-items: center;
				    justify-content: center;
			}
			.b_d_c {
				padding: 5px;
				width: 15.2%;
				display: inline-block;
				text-align: center;
				height: 50px;
				display: flex;
				    align-items: center;
				    justify-content: center;
				border-right: 1px solid #546794;
				float: left;
				
				
			}
			.key {
				width: 6%;
				
			}
		
			#table1{
				width: 96%;
				margin: auto;
				height: 88%;
			}
	.tou{
		width: 100%;
		height: 50px;
	}
	.tou img{
		width: 100%;
		height: 100%;
	}
	.over{
		height:85%;
		overflow: auto;
	}
		</style>	
	</head>
	<body>
		<div class="container">
			<div id="myModal" class="modal">
				<!-- Modal content -->
				<div class="modal-content">
					<div class="modal_c">
						<div class="tou">
							<img src="img/tou.png" >
						</div>
						<div class="over">
							
					
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">工单号</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">2098324239480234</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">接受时间</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">2020-09-12 12:00:00</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">问题描述</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">你好这是个问题描述，字应该很多，需要黄航</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">转办意见</span>
							</div>
							<div class="b_d_c" style="line-height: 17px;">
								<span class="value_c">你好这是个问题描述，字应该很多，你好这是个问题描述，字应该很多需要黄航</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">办结时限</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">2020-12-12 12:00:00</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">联系人</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">李先生</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">联系电话</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">18615247754</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">地址</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">你山东省济南市历下区旅游路4516号</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">紧急程度</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">一般</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">是否保密</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">是</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">是否回复</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">回复</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">回复备注</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">全年12项备注</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">办理轨迹</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">一般</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">转办人</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办中心</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">备注</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">123</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">受理类型</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">受理员</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">一般</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">受理员工号</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办中心</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">信息来源</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">123</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">来电类别</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">录入时间</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">一般</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">一级分类</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办中心</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">二级分类</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">123</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">三级分类</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">四级分类</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">一般</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">五级分类</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办中心</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">工单类型</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">123</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">回复类型</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">回复（回退或申请）时间</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">一般</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">回复（回退或申请）部门</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办中心</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">办理情况或回退（延期）理由</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">123</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">回退意见</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办</span>
							</div>
						</div>
						<div class="buiding_details_content">
							<div class="b_d_c key">
								<span class="key_c">领导意见</span>
							</div>
							<div class="b_d_c ">
								<span class="value_c">一般</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">签发人</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办中心</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">联系人1</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">123</span>
							</div>
							<div class="b_d_c key">
								<span class="key_c">联系电话1</span>
							</div>
							<div class="b_d_c">
								<span class="value_c">转办</span>
							</div>
						</div>
					</div>
					</div>
					<div class="x">
						<img src="./img/x.png" id="cancel" style="width: 38px;height: 38px;">
					</div>
				</div>

			</div>
			<div class="back">
				<img src="./img/fanhui.png" id="back">
			</div>
			<div class="header">
				<span>历下区检查院12345热线数据分析</span>
			</div>
			<div class="enentListContent">
				<div class="jc_table_bottom_seach1">
					<div class="year">
						<span class="selectYear">名称：</span>
						<input id="name" type="" name=""  value="" />
					</div>
					<div class="year">
						<span class="selectYear">分类：</span>
						<select class="pid" id="fenlei">
								<option value ="1">1</option>
								<option value ="1">1</option>
								<option value ="1">1</option>
								
						</select>
					</div>
					<div class="year">
						<span class="selectYear">地址：</span>
						<input id="address" type="" class="address" name=""/>
					</div>
					
					<div class="seach" id="query" style="margin-left: 20px;">
						<span>查询</span>
					</div>
					

				</div>

				<div class="jc_table_bottom1">
					<div class="jc_table_bottom_table1" style="width:78%;">
						<div id="table1" class="container">
							<table cellspacing="0" cellspacing="0">
								<thead>
									<tr>
										<th>序号</th>
										<th>名称</th>
										<th>归类</th>
										<th>地址</th>
										<th>时间</th>
										<th>状态</th>


									</tr>
								</thead>
								<tbody id="table_data1">

								</tbody>
							</table>
						</div>
						<div class="page flex_center">
							<div class="page_size flex_align">
								<img src="img/yema.png" id="jian">
								<span id="page_number">1</span>
								<img src="img/yema2.png" id="add">
							</div>
							<div class="page_size_jump flex_align">
								<span>前往</span>
								<div class="page_jump_number_border">
									<input id="page_jump_number" type="" name="" value="1" />
								</div>
								<span>页</span>
							</div>
							<div class="total_page">
								<span>共</span>
								<span id="total">3</span>
								<span>页</span>
							</div>
						</div>

					</div>
				</div>
			</div>

		</div>
		<script type="text/javascript">
			$(function() {
				tableData();
				// selectData();
				////查询分页数据 分页增加
				$("#add").click(function() {
					var val = Number($("#page_number").text());
					val = parseInt(val + 1);
					$("#page_number").text(val);

				});
				//查询分页数据  减
				$("#jian").click(function() {
					var val = Number($("#page_number").text());
					if (val <= 1) {
						return;
					};
					val = parseInt(val - 1);
					$("#page_number").text(val);

				});
				//隐藏事件详情
				$("#cancel").click(function(){
					$("#myModal").hide()
				})
				//返回上一页
				$("#back").click(function(){
					window.open('index.html')
				})
				//跳转到哪一页失去焦点触发
				$("#page_jump_number").blur(function() {
					console.log($(this).val())
					var jumpP = $(this).val(); //跳转的页码
				});
			
				//查询
				$("#query").click(function() {
					//执行查询操作	=》tableData();
					var name = $("#name").val(); // 
					var address= $("#address").val();//地址
					var fenlei=$("#fenlei").val();//分类

				})
			});
			//事件详情
			function tableName(){
				$("#myModal").show()
				// do something
				};
			
		
			function tableData() {
				//$ajax(...)循环放入数据  模拟数据 分页 size 12条数据
				var data = [{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					{

						index: '01',
						name: '生活垃圾处理与分类',
						quyuan: '生活垃圾',
						jianshu: '历下区甸柳街道甸北社区第六网格',
						anshu: '2020-2-36 12:00:00',
						anjianbi: '待处理',

					},
					
				]

				for (var i = 0; i < data.length; i++) {
					$('#table_data1').append(
						"<tr>" +
						"<td>" + data[i].index + "</td>" +
						"<td onClick='tableName(\"" + data[i].id + "\");'>" + data[i].name + "</td>" +
						"<td>" + data[i].quyuan + "</td>" +
						"<td>" + data[i].jianshu + "</td>" +
						"<td>" + data[i].anshu + "</td>" +
						"<td>" + data[i].anjianbi + "</td>" +
						"</tr>");
				}
				$("#table1 tr :nth-child(2)").addClass('selectTable');
			}
		</script>

	</body>
</html>
